// pages/bar/chart3.js
import * as echarts from '../../ec-canvas/echarts';

const app = getApp();
let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);


  var evaluateRangeStudentNumber = app.globalData.evaluateRangeStudentNumber;

  var option = {
    color: ['#67e0e3'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: [ '获评分数区间的学生人数']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['0-20', '20-40', '40-60', '60-80', '80-100'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    series: [
      // {
      //   name: '热度',
      //   type: 'bar',
      //   label: {
      //     normal: {
      //       show: true,
      //       position: 'inside'
      //     }
      //   },
      //   data: [300, 270, 340, 344, 300, 320, 310],
      //   itemStyle: {
      //     // emphasis: {
      //     //   color: '#37a2da'
      //     // }
      //   }
      // },
      {
        name: '获评分数区间的学生人数',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true
          }
        },
        data: evaluateRangeStudentNumber,
        itemStyle: {
          // emphasis: {
          //   color: '#32c5e9'
          // }
        }
      }
      // ,
      // {
      //   name: '负面',
      //   type: 'bar',
      //   stack: '总量',
      //   label: {
      //     normal: {
      //       show: true,
      //       position: 'left'
      //     }
      //   },
      //   data: [-20, -32, -21, -34, -90, -130, -110],
      //   itemStyle: {
      //     // emphasis: {
      //     //   color: '#67e0e3'
      //     // }
      //   }
      // }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})